<template>
    <div class="baseSearchPicker">
        <van-popup closeable v-model="showList" position="bottom" style="height: 100%;">
            <van-pull-refresh v-model="isLoading" :pulling-text="$t('PullingText')" :loosing-text="$t('PullingText')" :success-text="$t('refreshSuccee')" @refresh="onRefresh">
                <van-index-bar>
                    <div v-for="letter in letterArr" :key="letter">
                        <van-index-anchor :index="letter" />
                        <van-cell clickable :title="item" v-for="item in getSort(letter,columns)" :key="item" @click="getTimeZone(item)" />
                    </div>
                </van-index-bar>
            </van-pull-refresh>
        </van-popup>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isLoading:false,
            showList:false,
            letterArr:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
            columns:[]
        };
    },
    methods: {
        openTimeZone(val){
            this.showList = val;
        },
        getTimeZone(item){
            this.showList=false;
            this.$emit('getTimeZone',item);
        },
        async getDatas(){
            this.comm.loadingShow();
            let res = await this.API.selectTimeZone(1,{'lang':'zh_CN'});
            for(let i=0;i<res.length;i++){
                this.columns.push(res[i].timeZoneValue);
            }
        },
        getSort(letter,arr){
            let letArr=[];
            for(let i=0;i<arr.length;i++){
                let valueArr=arr[i].split(')')
                if(valueArr[1].indexOf(letter)==0){
                    letArr.push(arr[i]);
                }
            }
            return letArr;
        },
        onRefresh(){
            this.isLoading=false;
            this.getDatas();
        }
    },
    mounted(){
        this.getDatas();
    }
};
</script>
<style  lang="less">
.baseSearchPicker{
    text-align: left;
    .van-popup__close-icon{
        position: fixed;
        top: 8px;
        right: 8px;
    }
}
</style>
